<template>
    <vxe-table
        :loading="loading"
        ref="xTable"
        highlight-hover-row
        style="width: 100%"
        class="text-center"
        :max-height="maxHeight">
        <vxe-table-column title="日期" field="day" min-width="120" fixed="left"/>
        <vxe-table-column title="推广费" field="spreadCost" formatter="formatHumanRmb" min-width="120" v-if="field === 'roi'"/>
<!--            <vxe-table-column title="总充值" field="pay" formatter="formatHumanRmb" min-width="120"/>-->
<!--            <vxe-table-column title="总权益" field="withdraw" formatter="formatHumanRmb" min-width="120"/>-->
        <vxe-table-column :title="idx+1+'日'" :field="`${field}[${idx}]`" :class-name="columnClass" :formatter="['formatPercent', 2]" min-width="80" v-for="(idx, day) in days" :key="'roi'+day+Math.random()"/>
    </vxe-table>
</template>

<script>
import VXETable from "vxe-table";

export default {
    components: {

    },
    props: {
        field: {
            type: String,
            default: 'roi'
        },
        search: {
            source: '',
            day: [],
        }
    },
    data() {
        return {
            loading: false,
            selected: [],
            tableData: [],
            pageNo: 1,
            pageSize: 50,
            totalDataNumber: 0,
            pageOptions: this.$store.state.backend.pageOptions,
            pageCount: 0,
            options: this.$store.state.operation.options.bulletLog,
            // footer: {},
            days: {},
        }
    },
    computed: {
        maxHeight() {
            return this.$store.state.backend.windowInnerHeight - 250;
        },
    },
    methods: {
        handleSizeChange(val) {
            this.pageNo = 1;
            this.pageSize = parseInt(`${val}`);
            this.handleSearch();
        },
        handleCurrentChange(val) {
            this.pageNo = parseInt(`${val}`);
            this.handleSearch();
        },
        handleSelectionChange(val) {
            this.selected = val;
        },
        handleSearch() {
            this.loading = true;
            let filter = Object.assign({}, this.search, {
                page: this.pageNo,
                pageSize: this.pageSize,
                field: this.field,
            });
            this.$store.dispatch('spreadData/SourceLtvRoi', filter).then(({data}) => {
                this.days = data.days;
                // this.tableData = data.data;// 供图表用
                this.$refs.xTable.reloadData(data.data)
            }).finally(() => {
                this.loading = false;
            });
        },
        initData() {
            // this.initSearchDate();
            this.handleSearch();
        },
        // initSearchDate() {
        //     this.search.day = [
        //         moment().add(-1, 'M').unix(),
        //         moment().add(-1, 'd').unix(),
        //     ];
        // },
        // initSearch() {
        //     this.pageNo = 1;
        //     this.handleSearch();
        // },
        exportExcel () {
            this.$refs.xTable.exportData({
                filename: '推广数据-' + (this.field === 'roi' ? '实际ROI' : '市场ROI'),
                type: 'xlsx'
            })
        },
        columnClass({row, column}) {
            if (this.field !== 'roi') return '';
            let number;
            eval(`number = row.${column.property}`)
            return number >= 1 ? 'color-danger' : '';
        }
    },
    created() {
        this.initData();
    }
}
</script>

<style lang="scss" scoped>
#app .el-form-item {
    margin-bottom: 0;
}
</style>

